<template>
  <div class="register-page">
    <div class="register-container">
      <h2 class="text">Sign up</h2>
      <form @submit.prevent="handleSubmit">
        <label for="username">用户名：</label>
        <div class="input-icon-group">
          <input type="text" id="username" v-model="username" required />
          <i class="iconfont icon-xiaoren"></i>
        </div>
        <label for="first_password">密码：</label>
        <div class="input-icon-group">
          <input type="password" id="first_password" v-model="first_password" required />
          <i class="iconfont icon-mimasuo"></i>
        </div>
        <label for="second_password">确认密码：</label>
        <div class="input-icon-group">
          <input type="password" id="second_password" v-model="second_password" required />
          <i class="iconfont icon-mimasuo"></i>
        </div>
        <div>
          <button type="submit">注册</button>
        </div>
      </form>
      <div class="go-login">
        <p>已有账号？<a href="/login">登录</a></p>
      </div>
      <div class="go-login">
        <p>我是管理员,<a href="/admin-login">管理员入口</a></p>
      </div>
    </div>
  </div>
</template>

<script>
import showPrompt from '@/utils/showPrompt'
import { useRouter } from 'vue-router'
export default {
  data() {
    return {
      username: '',
      first_password: '',
      second_password: '',
      user_login_info: JSON.parse(localStorage.getItem('user_login_info')) || []
    }
  },
  created() {
    this.router = useRouter() //初始化路由
  },
  methods: {
    handleSubmit() {
      console.log('注册信息：', { username: this.username, password: this.second_password })
      if (this.first_password != this.second_password) {
        showPrompt('两次密码不一致', 'error')
        return
      }
      if (this.findUserId(this.username) || this.username === 'admin') {
        return showPrompt('用户名已存在', 'error')
      }
      this.user_login_info.push({
        userId: this.username,
        pwd: this.first_password
      })
      localStorage.setItem('user_login_info', JSON.stringify(this.user_login_info))
      showPrompt('注册成功', 'success')
      this.router.push('/login') //注册成功后跳转到登录页
    },
    findUserId(uname) {
      const result = this.user_login_info.find(item => item.userId === uname)
      return result?.userId
    }
  }
}
</script>

<style scoped>
.register-container {
  padding: 20px;
  border: 2px solid white;
  border-radius: 10px;
  width: 400px;
  height: 400px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  border-radius: 8px;
  padding: 6px;
  border: 1px solid #ccc;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.go-login a {
  text-decoration: none;
  color: purple;
}

.input-icon-group {
  display: flex;
  align-items: center; /* 垂直居中 */
  margin-bottom: 10px; /* 与下一个元素的间距 */
}

.input-icon-group input {
  flex: 1; /* 输入框占据剩余空间 */
  margin-bottom: 0; /* 移除原有的底部外边距 */
}

.input-icon-group .iconfont {
  margin-left: 10px; /* 图标与输入框的间距 */
  font-size: 20px;
}

.register-page {
  min-height: calc(100vh - 80px);
  background: linear-gradient(45deg, #ff6b6b, #a8d4d1, #b0c42d);
  background-size: 500% 500%;
  animation: gradient 10s ease infinite;
  /* 添加 flexbox 布局 */
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.text {
  display: flex;
  justify-content: center;
  font-size: 40px;
  color: transparent;
  letter-spacing: 5px;
  background: linear-gradient(to right, #000 0, #2dce30 20%, #000 40%);
  background-position: -32px 0;
  background-clip: text;
  animation: eff 3s linear infinite;
}
@keyframes eff {
  to {
    background-position: 500px 0;
    /* 动画结束时，设置背景渐变的位置向右移动到500像素，从而创建流光效果 */
  }
}
</style>
